import React, { useEffect, useRef } from "react";
import { FullScreenContainer, BorderBox1, BorderBox2, BorderBox3, BorderBox4, BorderBox5, BorderBox6, BorderBox7, BorderBox8, BorderBox9,
  BorderBox10, BorderBox11 } from "@jiaminghi/data-view-react";
import Fly from "./comps/fly";
import style from "./style.less";
export default () => {
  const ref = useRef();
  useEffect(() => {
    console.log("ref.current", ref.current);
  }, []);
  return (
    <FullScreenContainer >

      <BorderBox11 title="东奥数据统计平台" backgroundColor="#fafafa">
        <div
          className={`${style["flex-wrap"]} ${style["box-container"]}`}
          ref={ref}
        >
          <div className={`${style["flex-wrap"]}  ${style["flex-reverse"]} ${style.flex1}`}>
            <div className={`${style["flex-wrap"]} ${style.flex2}`}>
              <BorderBox8 style={{ padding: 10 }}>
                <ul
                  style={{ boxSizing: "border-box",
                    height: "100%",
                    padding: "30px",
                    width: "100%",
                    overflowY: "scroll",
                    lineHeight: "48px",
                    textAlign: "center",
                    fontSize: 26,
                    margin: 10,
                  }}
                  className={style.scroll}
                >
                  <li>4645</li>
                  <li>6546513</li>
                  <li>4645</li>
                  <li>6546513</li>
                  <li>4645</li>
                  <li>6546513</li>
                  <li>4645</li>
                  <li>6546513</li>
                  <li>4645</li>
                  <li>6546513</li>
                  <li>4645</li>
                  <li>6546513</li>
                  <li>4645</li>
                  <li>6546513</li>
                  <li>4645</li>
                  <li>6546513</li>
                </ul>
              </BorderBox8>

            </div>
            <div className={`${style["flex-wrap"]}  ${style.flex2}`}>
              <BorderBox9 color={["blue", "red"]}>
                <div className={style["flex-wrap"]}>
                  左侧2
                </div>
              </BorderBox9>
            </div>
            <div className={`${style["flex-wrap"]}  ${style.flex2}`}>
              <BorderBox10 color={["blue", "red"]}>
                <div className={style["flex-wrap"]}>
                  左侧3
                </div>
              </BorderBox10>
            </div>
          </div>
          <div
            className={`${style["flex-wrap"]}  ${style["flex-reverse"]} ${style.flex1}`}
            style={{
              boxSizing: "border-box",
              padding: "10px 20px" }}
          >
            <div
              className={`${style["flex-wrap"]}`}
              style={{
                height: 200,
                width: "100%",
                boxSizing: "border-box",
                border: "1px solid black",
                color: "red" }}
            >
              中间头部
            </div>
            <div className={style.flex2}>
              <Fly></Fly>
            </div>
          </div>
          <div className={`${style["flex-wrap"]} ${style.flex1}`}>右侧</div>
        </div>
      </BorderBox11>
    </FullScreenContainer>
  // <BorderBox11 title="北京冬奥会" backgroundColor="#fafafa">
  //   <div className={style["flex-wrap"]}> 北京冬奥会</div>
  // </BorderBox11>

  );
};
